<template>
  <el-dialog title="编辑角色" :visible.sync="formPage.show">
    <el-form :model="formPage.formData" :inline="true" label-position="left" class="gds_form" :rules="rules" ref="roleAddForm" style='width: 400px; margin-left:50px;'>
      <el-input v-model="formPage.formData.id" auto-complete="off" type="hidden"></el-input>
      <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="formPage.formData.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="seq" :label-width="formLabelWidth">
        <el-input-number size="medium" v-model="formPage.formData.seq"></el-input-number>
      </el-form-item>
      <el-form-item label="上级部门" :label-width="formLabelWidth" prop="pids">
        <el-cascader
          size="mini"
          :options="formPage.cascader_data"
          :show-all-levels="false" :props="props"
          v-model="formPage.formData.pids"
          @change="addPid"
          change-on-select
        ></el-cascader>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
        <el-select v-model="formPage.formData.status" placeholder="请选择状态" prop="status">
          <el-option label="停用" value='0'></el-option>
          <el-option label="启用" value='1'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input v-model="formPage.formData.description" auto-complete="off" p></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="formPage.show = false">取 消</el-button>
      <el-button type="primary" @click="sumbitForm">确 定</el-button>
      <el-button @click="resetForm('roleAddForm')">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>

     import {sumbitRole} from "../../../api/role/role";
     import {deptList} from "@/api/dept/dept";
     export default {
        name: "roleAdd",
        props:['formPage'],
      data() {
        return {
          formLabelWidth: '100px',
          props: {
            value: 'id',
            label:'simpleName',
            children: 'children'
          },
          rules: {
            name: [{ required: true, message: '资源名称不能为空', trigger: 'change' }],
            pids: [{ required: true, message: '角色部门不能为空', trigger: 'change' }],
            status:[{ required: true, message: '状态必须选择', trigger: 'change' }]
          },
        };
      },
      methods:{
        sumbitForm(){
          this.$refs['roleAddForm'].validate((valid) => {
            if (valid) {
              //
              sumbitRole(this.formPage.formData).then(response => {
                if(response){
                  this.$message({
                    message: response.data.mesg,
                    type: 'success',
                    duration: 5 * 1000
                  })
                  this.formPage.show = false;
                  this.$parent.onSearch();
                }
              }).catch(error => {
                console.log(error)
              });
            }
          })
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        addPid(aaa){
          if(aaa.length==1){
            this.formPage.formData.deptId=aaa[0]
          }
          else {
            this.formPage.formData.deptId=aaa[aaa.length-1]
          }
          // console.log(this.formPage.formData)
        },
        getDeptIds(id,array){
          array.forEach((item,index)=>{
            if(id==item.id){
              // console.log("**")
              // console.log(item)

              this.formPage.formData.pids=item.pids;
              if(item.id!=0){
                this.formPage.formData.pids.push(item.id);
              }
            }else {
              // console.log("***")
              if(item.children!=null){
                this.getDeptIds(id,item.children)
              }
            }
          })
        },
      },
       watch:{
         'formPage.formData.id':{
           handler(newValue, oldValue){
             console.log( this.formPage.cascader_data)
             if( this.formPage.cascader_data){
               this.getDeptIds(this.formPage.formData.deptId,this.formPage.cascader_data);
             }
           }
         },
       },
      mounted(){
          // console.log(this.formPage.formData)
      }

    }
</script>

<style scoped>

</style>
